<template>
	<view class="ljapp">
		<view v-if="loading">
		</view>
		<view v-else>
			<view style="padding-bottom: 38rpx;">
				<lj-top-tip :type="status_txt" :text="reason" v-if="status_txt"></lj-top-tip>

				<view class="card">
					<view class="title">请如实填写您的真实信息</view>

					<u--form labelWidth="auto" :labelStyle="{fontSize:'28rpx',color:'#333'}">
						<u-form-item label="姓名" required borderBottom>
							<u--input
								v-model="obj.name"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入真实姓名"
							></u--input>
						</u-form-item>
						<u-form-item label="性别" required borderBottom>
							<view class="u-flex" style="width: 100%;">
								<view class="u-flex-10"></view>
								<u-radio-group
									size="33rpx"
									activeColor="#356bfd"
									v-model="obj.sex"
								>
									<u-radio label="男" name="1" labelSize="24rpx"></u-radio>
									<u-radio label="女" name="2" labelSize="24rpx"></u-radio>
								</u-radio-group>
							</view>
						</u-form-item>
						<u-form-item label="出生日期" required borderBottom>
							<view style="width: 100%;">
								<picker mode="date" :value="obj.birth" @change="changeDate">
									<view style="font-size:24rpx;text-align:right;" v-if="obj.birth">{{obj.birth}}</view>
									<view style="font-size:24rpx;text-align:right;color:#c2c2c2;" v-else>选择出生日期</view>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="联系方式" required borderBottom>
							<u--input
								v-model="obj.mobile"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入手机号码"
							></u--input>
						</u-form-item>
						<u-form-item label="身份证号" required borderBottom>
							<u--input
								v-model="obj.id_card"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入身份证号"
							></u--input>
						</u-form-item>
						<u-form-item label="职称" required borderBottom>
							<!-- <u--input
								v-model="obj.academic_title"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入职称"
							></u--input> -->
							<view class="u-flex" style="width:100%" @click="Onthree">
								<u--input
									v-model="academic_title_name"
									border="none"
									inputAlign="right"
									fontSize="24rpx"
									placeholderStyle="color: #c2c2c2"
									placeholder="选择职称"
									disabled
									disabledColor="transparent"
								></u--input>
							</view>
						</u-form-item>
						<!-- <u-form-item label="一级科室" required borderBottom>
							<view class="u-flex" style="width:100%" @click="Onone">
								<u--input
									v-model="onename"
									border="none"
									inputAlign="right"
									fontSize="24rpx"
									placeholderStyle="color: #c2c2c2"
									placeholder="选择一级科室"
									disabled
									disabledColor="transparent"
								></u--input>
							</view>
						</u-form-item> -->
						<u-form-item label="科室" required borderBottom>
							<view class="u-flex" style="width:100%" @click="Ontwo">
								<u--input
									v-model="twoname"
									border="none"
									inputAlign="right"
									fontSize="24rpx"
									placeholderStyle="color: #c2c2c2"
									placeholder="选择科室"
									disabled
									disabledColor="transparent"
								></u--input>
							</view>
						</u-form-item>
						<u-form-item label="执业机构" required borderBottom>
							<u--input
								v-model="obj.practice_organization"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入您的执业机构"
							></u--input>
						</u-form-item>
						<u-form-item label="所属地区" required borderBottom>
							<view class="u-flex" style="width:100%" @click="Oncityopen">
								<u--input
									v-model="obj.address"
									border="none"
									inputAlign="right"
									fontSize="24rpx"
									placeholderStyle="color: #c2c2c2"
									placeholder="选择您的地区"
									disabled
									disabledColor="transparent"
								></u--input>
							</view>
						</u-form-item>
						
						<u-form-item label="擅长领域" required></u-form-item>
						<view style="margin-top: -10rpx;">
							<u--textarea
								v-model="obj.be_good_at_synopsis"
								fontSize="24rpx"
								height="226rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="填写示例：关节疾病，常见关节炎，关节疼痛诊治，骨折，对创伤疾病有大量治疗经验" ></u--textarea>
						</view>
						<u-form-item label="个人简介" required></u-form-item>
						<view style="margin-top: -10rpx;">
							<u--textarea
								v-model="obj.synopsis"
								fontSize="24rpx"
								height="226rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="填写示例：主治医生，中共党员，硕士研究生，毕业于暨南大学第一临床医学院，从事眼科工作数年，擅长各种常见眼病、多发眼病的诊治，尤其擅长近视、远视、散光等屈光不正，睑腺炎、结膜炎等感染性眼病，早产儿视网膜病变、新生儿眼底病变的诊治...." ></u--textarea>
						</view>
						
						<view class="u-flex u-flex-between">
							<view>
								<u-form-item label="执业医师资格证" required></u-form-item>
								<view style="margin-top: -6rpx;">
									<u-upload
										:fileList="certificate"
										name="certificate"
										maxCount="1"
										uploadText="上传照片仅限1张"
										@afterRead="uploadSuccess"
										@delete="certificate=[],obj.certificate=''"
									></u-upload>
								</view>
							</view>
						
							<view>
								<u-form-item label="专家工作照" required></u-form-item>
								<view style="margin-top: -6rpx;">
									<u-upload
										:fileList="img"
										name="img"
										maxCount="1"
										uploadText="上传照片仅限1张"
										@afterRead="uploadSuccess"
										@delete="img=[],obj.img=''"
									></u-upload>
								</view>
							</view>
						</view>
						<view class="u-flex u-flex-between">
							<view>
								<u-form-item label="身份证照片" required></u-form-item>
								<view style="margin-top: -6rpx;">
									<u-upload
										:fileList="id_card_front"
										name="id_card_front"
										maxCount="1"
										uploadText="身份证正面"
										@afterRead="uploadSuccess"
										@delete="id_card_front=[],obj.id_card_front=''"
									></u-upload>
								</view>
							</view>
						
							<view>
								<u-form-item label="　　　　　"></u-form-item>
								<view style="margin-top: -6rpx;">
									<u-upload
										:fileList="id_card_back"
										name="id_card_back"
										maxCount="1"
										uploadText="身份证反面"
										@afterRead="uploadSuccess"
										@delete="id_card_back=[],obj.id_card_back=''"
									></u-upload>
								</view>
							</view>
						</view>
						<view class="u-flex u-flex-between">
							<view>
								<u-form-item label="签名图片" required>
									<!-- <view>用于开处方时签名</view> -->
								</u-form-item>
								<view style="margin-top: -6rpx;">
										<u-upload
											:fileList="autograph_img"
											name="autograph_img"
											maxCount="1"
											uploadText="签名图片"
											:disabled="true"
											@cBeforeRead="openSignPopup"
											@delete="autograph_img=[],obj.autograph_img=''"
										></u-upload>
								</view>
							</view>
						</view>
					</u--form>

					<u-datetime-picker ref="datetimePicker" mode="date" :minDate="0" :show="showDate" v-model="birth" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
					
					<!-- 一级科室 -->
					<Compicker ref="Compicker1" title="选择一级科室" @Onreturn="Onreturn1"></Compicker>
					<!-- 一级科室 -->
					<Compicker ref="Compicker2" title=" " @Onreturn="Onreturn2"></Compicker>
					<!-- 职称 -->
					<Compicker ref="Compicker3" title=" " @Onreturn="Onreturn3"></Compicker>
					
					<!-- 选择地址弹窗 -->
					<Comcity ref="Comcity"  @Onaddress="Onaddress"></Comcity>
				</view>

				<view class="btn-row" v-if="status!=1">
					<view class="btn" @click="submit">{{status==0||status==2?'修改提交':'提交申请'}}</view>
				</view>
			</view>
		</view>
		
		<u-popup mode="bottom" :show="showSignPopup" @touchmove.stop.prevent="">
			<view class="sign-popup-content">
				<view class="sign-popup-close" @click='closeSignPopup'>X</view>
				<view class="sign-popup-title">开始签名</view>
				<canvas class='firstCanvas' canvas-id="firstCanvas"
					@touchmove='move' @touchstart='start($event)' @touchend='end'
					@touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
				</canvas>
			   
				<view class="caozuo">
					<view class="chongqian" @tap="clearClick">重签</view>
					<view class="over" @click="overSign">完成签名</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	import Comcity from '@/components/Comcity.vue'
	import Compicker from '@/components/Compicker.vue'
	export default {
		components: {
			Comcity,
			Compicker
		},
		data() {
			return {
				loading: false,
				status: -10, // -10未申请 0.待审核 1.审核通过
				status_txt: '',
				reason: '',
				time: '',

				//提交需求
				obj: {
					name: '',
					sex: '1',
					birth: '',
					mobile: '',
					id_card: '',
					academic_title: '',
					academic_title_id: 0,
					room_type_id: 0,
					room_id: 0,
					practice_organization: '',
					
					address: '',
					province:'',
					city:'',
					area:'',
					province_code: '',
					city_code: '',
					area_code: '',
					
					be_good_at_synopsis: '',
					synopsis: '',
					
					certificate: '',
					img: '',
					id_card_front: '',
					id_card_back: '',
					autograph_img: '',
				},
				showDate: false,
				birth: '1991-10-10',
				
				academic_title_name: '', //职称名字
				onename: '', //一级科室名字
				twoname: '', //二级科室名字
				certificate: [],
				img: [],
				id_card_front: [],
				id_card_back: [],
				autograph_img: [],
				
				signLoading: true,
				showSignPopup: false,
				isSignEnd: false, // 是否签名
			}
		},
		onLoad() {
			_that = this
			
			this.init();
		},
		onReady() {
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas', _that)
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
			
			this.signLoading = false
		},
		methods: {
			changeDate(e){
				this.obj.birth = e.detail.value
				// this.obj.birth = this.$u.timeFormat(e.value,'yyyy-mm-dd')
				// this.showDate = false
			},
			async uploadSuccess(e) {
				console.log(e, )
				// this.$set(this.arr, index, value);
				this[e.name] = [{
					...(e.file),
					status: 'uploading',
					message: '上传中'
				}]

				const result = await this.uploadFilePromise(this[e.name][0].url)
				if(result.code == 1){
					this[e.name] = [{
						status: 'success',
						message: '',
						url: result.data.fullurl
					}]
					this.obj[e.name] = result.data.url
				}else{
					this[e.name] = [{
						status: 'failed',
						message: '上传失败'
					}]
				}
			},
			uploadFilePromise(url, uploadurl) {
				var that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$Config.http_static+'api/common/uploader',
						filePath: url,
						name: 'file',
						formData: {},
						success: (uploadFileRes) => {
							var res = JSON.parse(uploadFileRes.data);
							console.log('uploadFilePromise',res)
							resolve(res)
						},
						fail: e => {
							resolve({code:0})
						},
					});
				})
			},
			//打开弹窗
			Oncityopen() {
				this.$refs.Comcity.Onopen(this.obj.area_code)
			},
			//地址确认返回
			Onaddress(e) {
				this.obj.province_code	= e.province.code
				this.obj.city_code = e.city.code
				this.obj.area_code = e.county.code
				
				this.obj.province = e.province.title
				this.obj.city = e.city.title
				this.obj.area = e.county.title
				
				this.obj.address = this.obj.province+'-'+this.obj.city+'-'+this.obj.area
			},

			//详情
			init() {
				this.$Http({
					url: 'doctorApplyDetail',
					load: false,
					data: {},
				}).then(res => {
					this.loading = false
					if (res.code == 1 && res.data) {
						this.status = res.data.auditstatus
						if(this.status==0){
							this.status_txt = 'warning'
							this.reason = '审核中'
							this.time = this.$u.timeFormat(res.data.updatetime)
						}else if(this.status==1){
							this.status_txt = 'success'
							this.reason = '已通过'
							this.time = this.$u.timeFormat(res.data.audittime)
						}else if(this.status==2){
							this.status_txt = 'danger'
							this.reason = '未通过，原因：'+res.data.reason
							this.time = this.$u.timeFormat(res.data.audittime)
						}

						// if(res.data.status==1){

						// }else{
							this.obj.name = res.data.name
							this.obj.sex = res.data.sex
							this.obj.birth = res.data.birth
							this.obj.mobile = res.data.mobile
							this.obj.id_card = res.data.id_card
							this.obj.academic_title = res.data.academic_title
							this.obj.academic_title_id = res.data.academic_title_id || 0
							this.obj.room_type_id = res.data.room_type_id || 0
							this.obj.room_id = res.data.room_id || 0
							this.obj.practice_organization = res.data.practice_organization
							
							this.obj.address = res.data.address
							this.obj.province = res.data.province
							this.obj.city = res.data.city
							this.obj.area = res.data.area
							this.obj.province_code = res.data.province_code
							this.obj.city_code = res.data.city_code
							this.obj.area_code = res.data.area_code
							
							this.obj.be_good_at_synopsis = res.data.be_good_at_synopsis
							this.obj.synopsis = res.data.synopsis
							this.obj.certificate = res.data.certificate
							this.obj.img = res.data.img
							this.obj.id_card_front = res.data.id_card_front
							this.obj.id_card_back = res.data.id_card_back
							this.obj.autograph_img = res.data.autograph_img
							
							if(this.obj.birth) this.birth = this.obj.birth

							if (this.obj.certificate) this.certificate = [{
								status: 'success',
								message: '',
								url: this.$base.cdn(this.obj.certificate),
							}]
							if (this.obj.img) this.img = [{
								status: 'success',
								message: '',
								url: this.$base.cdn(this.obj.img),
							}]
							if (this.obj.id_card_front) this.id_card_front = [{
								status: 'success',
								message: '',
								url: this.$base.cdn(this.obj.id_card_front),
							}]
							if (this.obj.id_card_back) this.id_card_back = [{
								status: 'success',
								message: '',
								url: this.$base.cdn(this.obj.id_card_back),
							}]
							if (this.obj.autograph_img) this.autograph_img = [{
								status: 'success',
								message: '',
								url: this.$base.cdn(this.obj.autograph_img),
							}]
						// }
					}
					if (res.code == 1) {
						//职称
						this.OnacademicTitle()
						//科室列表
						// this.OnroomList()
						//二级科室
						this.Onroom()
					}
				});
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			// 职称
			OnacademicTitle() {
				this.$Http({
					url: 'academicTitle',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = [{
							id: 0,
							title: '选择职称'
						}]
						res.data.forEach(item => {
							let obj = {
								id: item.id,
								title: item.name,
							}
							onelist.push(obj)
							if (item.id == this.obj.academic_title_id) {
								this.academic_title_name = item.name
							}
						})
						this.$refs.Compicker3.Ondata(onelist, this.obj.academic_title_id)
					}
				});
			},
			//打开职称
			Onthree() {
				this.$refs.Compicker3.Onopen()
			},
			//职称的返回
			Onreturn3(e) {
				this.obj.academic_title_id = e.id
				if(e.id) this.academic_title_name = e.title
				else this.academic_title_name = ""
			},
			// 一级科室
			OnroomList() {
				this.$Http({
					url: 'roomType',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = []
						res.data.forEach((item, index) => {
							let obj = {
								title: item.name,
								id: item.id,
							}
							onelist.push(obj)
							if (item.id == this.obj.room_type_id) {
								this.onename = item.name
							}
						})
						this.$refs.Compicker1.Ondata(onelist, this.obj.room_type_id)
					}
				});
			},
			//打开一级科室
			Onone() {
				this.$refs.Compicker1.Onopen()
			},
			//一级科室的返回
			Onreturn1(e) {
				console.log('Onreturn1',e)
				if (e.id != this.obj.room_type_id) {
					this.onename = e.title
					this.obj.room_type_id = e.id
					this.twoname = ''
					this.obj.room_id = ''
					this.$refs.Compicker2.Ondata([], '')
					this.Onroom()
				}
			},
			// 二级科室
			Onroom(){
				this.$Http({
					url: 'room',
					data: {
						room_type_id: 0,//this.obj.room_type_id
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = [{
								id: 0,
								title: "选择科室",
							}]
						res.data.forEach((item, index) => {
							let obj = {
								id: item.id,
								title: item.name,
							}
							onelist.push(obj)
							if (item.id == this.obj.room_id) {
								console
								this.twoname = item.name
							}
						})
						this.$refs.Compicker2.Ondata(onelist, this.obj.room_id)
					}
				});
			},
			//打开二级科室
			Ontwo() {
				// if (this.onename == '') {
				// 	uni.showToast({
				// 		title: '请先选择一级科室',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				this.$refs.Compicker2.Onopen()
			},
			//二级科室的返回
			Onreturn2(e) {
				this.obj.room_id = e.id
				if(e.id) this.twoname = e.title
				else this.twoname = ""
			},
			
			//提交
			submit() {
				this.$Http({
					url: 'doctorApply',
					data: this.obj,
					show: true,
					type: 'POST'
				}).then(res => {
					console.log('submit',res)
					if (res.code == 1) {
						this.$u.toast(res.msg)
						this.init()
					}
				});
			},
			
			
			// 签名
			closeSignPopup(){
				this.showSignPopup = false
			},
			openSignPopup(){
				if(this.signLoading){
					return this.$u.toast('签名插件加载中，请稍后')
				}
				
				this.showSignPopup = true
			},
			overSign: function() {
				if (_that.isSignEnd) {
					uni.showLoading({
						title: '签名生成中...'
					})
					
					content.fillText(" ", 0, 0);
					content.draw(true,function(){
						setTimeout(function(){
							uni.canvasToTempFilePath({
								canvasId: 'firstCanvas',
								fileType: "png",
								success: function(res) {
									//打印图片路径
									console.log(res.tempFilePath)
									console.log('完成签名',res)
									
									uni.hideLoading()
									_that.closeSignPopup()
									_that.clearClick()
									
									uni.uploadFile({
										url: _that.$Config.http_static+'api/common/uploader',
										filePath: res.tempFilePath,
										name: 'file',
										formData: {},
										success: (uploadFileRes) => {
											var res = JSON.parse(uploadFileRes.data);
											console.log('uploadFilePromise',res)
											
											if(res.code == 1){
												_that.autograph_img = [{
													status: 'success',
													message: '',
													url: res.data.fullurl
												}]
												_that.obj.autograph_img = res.data.url
											}else{
												_that.autograph_img = [{
													status: 'failed',
													message: '上传失败'
												}]
												_that.obj.autograph_img = ''
											}
										},
										fail: e => {
											_that.autograph_img = [{
												status: 'failed',
												message: '上传失败'
											}]
											_that.obj.autograph_img = ''
										},
									});
								},
								fail(){
									uni.hideLoading()
									uni.showToast({
										title: '签名生成失败',
										icon: "none",
										duration: 1500,
										mask: true
									})
								}
							})
						}, 1000)
					})
				} else {
					uni.showToast({
						title: '请先完成签名',
						icon: "none",
						duration: 1500,
						mask: true
					})
				}
			
			},
			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log("触摸开始" + event.changedTouches[0].x)
				// console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);
			
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},
			// 画布的触摸移动结束手势响应
			end: function(e) {
				// 设置为已经签名
				this.isSignEnd = true;
				console.log('end')
				// 清空轨迹数组
				touchs.pop()
				// for (let i = 0; i < touchs.length; i++) {
				// 	touchs.pop()
				// }
			
			},
			// 画布的触摸取消响应
			cancel: function(e) {},
			// 画布的长按手势响应
			tap: function(e) {},
			//画布触摸错误
			error: function(e) {},
			//绘制
			draw: function(touchs) {
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isSignEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
		}
	}
</script>

<style lang="less">
	@import '@/pagesB/style.less';

	.card{
		margin: 20rpx;
		padding-top: 26rpx;
		padding-left: 16rpx;
		padding-right: 15rpx;
		padding-bottom: 40rpx;

		.title{
			position: relative;
			padding-left: 34rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-weight: 500;
			margin-left: 20rpx;
			margin-bottom: 10rpx;

			&:after{
				position: absolute;
				top: 0;
				left: 0;
				content: '';
				width: 6rpx;
				height: 42rpx;
				border-radius: 42rpx;
				background-color: #356bfd;
				overflow: hidden;
			}
		}

		/deep/.u-form-item__body{padding: 24rpx 0 22rpx;}
		/deep/.u-form-item__body__left{padding-left: 52rpx!important;}
		/deep/.u-line{
			border-color: #f5f5f5!important;
			border-width: 2px!important;
		}
		/deep/.u-form-item__body__right__content{padding-right: 54rpx;}
		/deep/.u-form-item__body__left__content__required{font-weight: 700;left:-24rpx;color:#ff0707;}
		
		/deep/.u-radio{margin-left: 34rpx;}
		
		/deep/.u-textarea{
			padding: 10rpx 24rpx;
			padding-right: 18rpx;
		}

		/deep/.u-upload{padding-left: 28rpx;}
		/deep/.u-upload__wrap__preview__image{
			width: 192rpx!important;height: 174rpx!important;
		}
		/deep/.u-upload__button{margin: 0;border-radius: 10rpx;background-color: #f1f1f1;width: 192rpx!important;height: 174rpx!important;
			.u-icon__icon{
				font-size: 70rpx!important;
			}
		}
		/deep/.u-upload__button__text{font-size: 20rpx; color: #999;}
	}

	.btn-row{
		margin-top: 50rpx;
		
		.btn{
			background-color: #356bfd;
		}
	}
</style>
